<!--  -->
<template>
  <div id="Header">
    <div v-if="viewShow"
         class="header_left">
      <img src="../assets/img/logo.png"
           alt="">
    </div>
    <div class="header_right">
      <div>
        <a target="_blank"
           class="qq"
           :href="`http://wpa.qq.com/msgrd?v=3&uin=${qq}&site=qq&menu=yes`"><img border="0"
               src="../assets/img/QQ.png"
               alt="在线咨询"
               title="在线咨询" />在线咨询</a>
        <!-- <span class="user">{{userName}}<img src="../assets/img/bottom.png"
               alt=""></span> -->

        <el-dropdown class="user"
                     trigger='click'
                     @command="handleCommand">
          <span class="el-dropdown-link">
            {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command='jumpRegister'>注册</el-dropdown-item>
            <el-dropdown-item command='jumpChangePass'>修改密码</el-dropdown-item>
            <el-dropdown-item command='jumpLogin'>登陆/注销</el-dropdown-item>
            <el-dropdown-item command='jumpOut'>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div v-if="viewShow"
         class="header_center">
      <img src="../assets/img/centerfont.png"
           alt="">
    </div>
    <div v-if="!viewShow"
         class="header-nav">
      <template v-for="(item, index) in navData">
        <router-link :to="item.url"
                     :key="index"
                     v-if="item.isAct !== 1">
          <div :class="isSelect == index? 'active': ''"
               @click="click_sel(index)">
            <img :src="item.imgSrc"
                 alt="">
            <p>{{item.text}}</p>
          </div>
        </router-link>
      </template>
    </div>
    <!-- 支付的弹窗 -->
    <el-dialog title="付费激活"
               :visible.sync="dialogFormVisible">
      <div class="box">
        <p>
          <span>温馨提示：</span>
          感觉您使用题库专家考试辅导软件！你可以通过下方渠道购买题库专家考试软件，如有疑问请联系我们。
          <span>软件激活后无使用期限 无数量限制 终生免费升级</span>
        </p>
        <p>用手机扫描下方二维码进行支付</p>
        <p>支付后联系微信或者QQ：{{qq}}领取激活码</p>
        <div>
          <img :src="wechat"
               alt="">
          <img :src="alipay"
               alt="">
        </div>
        <p><span>当前课程：{{goodName}}</span></p>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <p>请输入激活码:</p>
        <input type="text"
               v-model="formCode"
               placeholder="购买题库后将激活码填入文本框中">
        <el-button type="primary"
                   @click="click_activation">激活</el-button>
        <!-- <el-button type="primary"
                   @click="dialogFormVisible = false">确 定</el-button> -->
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'Header',
  props: ['isSelect', 'viewShow'],
  data () {
    return {
      // 导航
      navData: [
        {
          url: '/personalCenter',
          imgSrc: require('../assets/img/head1.png'),
          text: '个人中心'
        },
        {
          url: '/practise',
          imgSrc: require('../assets/img/head2.png'),
          text: '题库练习'
        },
        {
          url: '/calendar',
          imgSrc: require('../assets/img/head3.png'),
          text: '历年真题'
        },
        {
          url: '/simulation',
          imgSrc: require('../assets/img/head4.png'),
          text: '模拟考试'
        },
        {
          url: '/wrong',
          imgSrc: require('../assets/img/head5.png'),
          text: '错题强化'
        },
        {
          url: '/consolidate',
          imgSrc: require('../assets/img/head6.png'),
          text: '巩固练习'
        },
        {
          url: '',
          imgSrc: require('../assets/img/head7.png'),
          text: '激活软件',
          isAct: null
        },
        {
          url: '/information',
          imgSrc: require('../assets/img/head8.png'),
          text: '考试资讯'
        },
        {
          url: '/',
          imgSrc: require('../assets/img/head9.png'),
          text: '重选课程'
        }
      ],
      // isSelect: this.$store.state.navSel || 0,
      // 用户
      userName: '',
      // 支付的弹窗
      dialogFormVisible: false,
      // 激活码
      formCode: '',
      // 激活题库名
      goodName: '',
      // 微信与阿里的支付码
      wechat: '',
      alipay: '',
      qq: ''
    }
  },

  components: {},

  computed: {},

  mounted () {
    this.userName = localStorage.getItem('mobile')
    // 查询当前题库是否激活
    if (!this.viewShow) {
      this.$http.check({
        phone: localStorage.getItem('mobile'),
        id: localStorage.getItem('gid')
      }).then((res) => {
        // console.log(res)
        this.navData[6].isAct = res.data.data.is_act
      }).catch((err) => {
        console.log(err)
      })
    }
    // 获取页面配置信息
    this.$http.custom({
      phone: localStorage.getItem('mobile')
    }).then((res) => {
      localStorage.setItem('customData', JSON.stringify(res.data.data))
      let customData = res.data.data
      this.wechat = customData.url + customData.wechat
      this.alipay = customData.url + customData.alipay
      this.qq = customData.pre
    }).catch((err) => {
      console.log(err)
    })
  },
  methods: {
    // 点击选中
    click_sel (i) {
      if (i === 6) {
        this.goodName = this.$store.state.goodName
        this.dialogFormVisible = true
      }
    },
    // 发送激活码激活
    click_activation () {
      this.$http.code({
        phone: localStorage.getItem('mobile'),
        id: localStorage.getItem('gid'),
        code: this.formCode
      }).then((res) => {
        console.log(res)
        this.$message({
          message: '激活成功',
          type: 'success'
        })
        this.dialogFormVisible = false
        // this.navData[6].isAct = 1
        this.$set(this.navData[6], 'isAct', 1)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 跳转注册
    handleCommand (command) {
      this.$message('click on item ' + command)
      switch (command) {
        case 'jumpRegister':
          localStorage.removeItem('token')
          this.$router.push({ path: '/login?pageShow=2' })
          break
        case 'jumpChangePass':
          localStorage.removeItem('token')
          this.$router.push({ path: '/login?pageShow=3' })
          break
        case 'jumpLogin':
          localStorage.removeItem('token')
          this.$router.push({ path: '/login' })
          break
        case 'jumpOut':
          localStorage.removeItem('token')
          this.$router.push({ path: '/login' })
          break
      }
    }
    // 点击激活付款
    // active_goods (goodName) {
    //   this.dialogFormVisible = true
    //   this.goodName = goodName
    // }
  }
}

</script>
<style lang='less'>
#Header {
  width: calc(100%-48px);
  // width: 100%;
  height: 63px;
  background: url("../assets/img/headbg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0 24px;
  // line-height: 63px;
  .header_left {
    float: left;
    line-height: 63px;
    img {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .header_center {
    line-height: 63px;
    img {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .header_right {
    float: right;
    line-height: 63px;
    div {
      font-size: 14px;
      color: #fffefe;
      .qq {
        margin-right: 20px;
        padding: 2px 5px;
        background: rgba(236, 237, 244, 0.35);
        border-radius: 15px;
        text-decoration: none;
        color: white;
        img {
          margin: 0 3px;
          vertical-align: middle;
        }
      }
      .user {
        line-height: 20px;
        cursor: pointer;
        img {
          margin: 0 3px;
          vertical-align: middle;
          margin-left: 10px;
        }
      }
    }
  }
  .header-nav {
    float: left;
    height: 56px;
    position: relative;
    top: 50%;
    margin-top: -28px;
    padding-left: 30px;
    a {
      color: #333;
      div {
        float: left;
        background: linear-gradient(
          180deg,
          rgba(248, 248, 248, 1) 0%,
          rgba(219, 219, 219, 1) 100%
        );
        border-image: linear-gradient(
            0deg,
            rgba(248, 248, 248, 1),
            rgba(219, 219, 219, 1)
          )
          10 10;
        border-radius: 6px;
        padding: 2px 5px;
        margin-right: 10px;
        img {
          width: 31px;
          height: 31px;
        }
        p {
          font-size: 12px;
        }
      }
      div:hover {
        background: linear-gradient(
          -2deg,
          rgba(16, 115, 208, 1) 0%,
          rgba(172, 206, 239, 1) 100%
        );
        color: white;
      }
      .active {
        background: linear-gradient(
          -2deg,
          rgba(16, 115, 208, 1) 0%,
          rgba(172, 206, 239, 1) 100%
        );
        color: white;
      }
    }
  }
  .el-dialog__wrapper {
    .el-dialog {
      width: 40%;
      text-align: left;
      .el-dialog__body {
        .box {
          p {
            font-size: 14px;
            margin: 10px 0;
            span {
              color: #ff0000;
            }
          }
          div {
            margin: 20px 0;
            text-align: center;
            img {
              width: 180px;
              height: 180px;
              margin: 0 50px;
            }
          }
        }
      }
      .el-dialog__footer {
        .dialog-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          input {
            width: 60%;
            height: 40px;
            border-radius: 10px;
            border: 1px solid #999;
            padding: 0 10px;
            margin: 0 20px;
          }
          p {
            width: 120px;
          }
        }
      }
    }
  }
}
</style>
